 <template>
  <section class="homepage-platform">
    <div class="section-header">
      <div class="section-title">
        开放平台
      </div>
      <div class="section-sub-title">
        · 开市时间 工作日 8:00-17:00
      </div>
    </div>
    <div class="section-content">
      <div class="left-part">
        <div v-for="(item,index) in list" :key="index" class="list-row">
            <div class="list-cell">
              <div class="cell-title">今日求购数</div>
              <div class="cell-field">
                <span class="cell-value">{{item.want}}</span>
                <span class="cell-unit">笔</span>
              </div>
            </div>
            <div class="list-cell">
              <div class="cell-title">今日搜索次数</div>
              <div class="cell-field">
                <span class="cell-value">{{item.search}}</span>
                <span class="cell-unit">次</span>
              </div>
            </div>
          </div>
        <img width="100%" src="../../../assets/front/img/route.jpg">
      </div>
      <div class="right-part">
         <div v-for="n in 9" :key="n" class="right-box">
           <template v-if="wantList[n-1]">
             <div class="title">{{wantList[n-1].name}}</div>
             <div class="type">{{wantList[n-1].category.name}}<span class="number">{{wantList[n-1].grade.name}}</span></div>
             <div class="number">出价：<span class="price">{{wantList[n-1].price}}</span>需求：<span class="weight">{{wantList[n-1].weight}}</span></div>
             <div class="status">
               {{auditTypeMap[wantList[n-1].status]}}
             </div>
           </template>
         </div>
      </div>
    </div>
  </section>
</template>

<script>
import HomepageAPI from '@/api/homepage/homepage';
export default {
    data() {
        return {
            list: [
                {
                    want: 597,
                    search: '17,907'
                }
            ],
            wantList: [],
            auditTypeMap: ['提交信息', '待审核', '交易中', '已完成']
        };
    },
    mounted() {
        this.getVirtualData();
        this.getWantList();
    },
    methods: {
        getVirtualData() {
            HomepageAPI.getVirtualData()
                .then(res => {
                    this.list[0].want = res.obj.todayBuy;
                    this.list[0].search = res.obj.todaySearch;
                });
        },
        getWantList() {
            HomepageAPI.buyRecord()
                .then(res => {
                    this.wantList = res.obj;
                });
        }

    }
};
</script>

<style lang="scss">
  @import "../../../assets/front/front";

  .homepage-platform {
    .section-header {
      padding-left: 5px;
      height: 60px;
      display: flex;
      align-items: center;
      .section-title {
        font-size: 22px;
      }
      .section-sub-title{
        margin-left:60px;
        font-size: 12px;
        font-family: SimSun,serif;
        color: $font-gray-color ;
      }
    }
    .section-content {
      height:350px;
      display: flex;
      .left-part {
        width:300px;
        padding:0 20px;
        border: $border;
        background-color: white;
        .list-row {
          height:80px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: $border;
        }
        .list-cell {
          width: 120px;
          height:44px;
          text-align: center;
          .cell-title {
            font-size: 12px;
            color: #646464;
          }
          .cell-value {
            font-size: 24px;
            color: $main-color;
          }
          .cell-unit {
            font-size: 12px;
            color: #aaaaaa;
          }
        }
      }
      .right-part{
        margin-left:20px;
        width: 880px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .right-box {
          padding:20px 30px;
          width:280px;
          height:110px;
          border: $border;
          position: relative;
          background-color: white;
          .title {
            font-size:1.5em;
          }
          .type {
            margin-top:5px;
            font-size:1.2em;
            color: $main-color;
          }
          .number {
            margin-top:10px;
          }
          .price {
            margin-right:20px;
          }
          .weight,.price {
            color: $main-color;
          }
          .status {
            position: absolute;
            top:28px;
            right:10px;
            z-index:100;
            color:white;
          }
          &:after {
            content:'';
            position: absolute;
            right:-8px;
            top:20px;
            width:75px;
            height:40px;
            background: url("../../../assets/front/img/book_label.png");
          }
        }
      }
    }

  }


</style>
